import {FC,forwardRef,useImperativeHandle,useState} from 'react'

// 声明props类型
type Iprops = {
    // val:string;
    // onInputChange:(val:string) => void;
    onAddTodo:() => void;
}

// const Todoinput:FC<Iprops> = (props) => {
//     // 解构val
//     let {val,onInputChange} = props

//     // onChange处理函数
//     let handleChange = (e:any) => {
//         console.log(e.target.value);
//         onInputChange(e.target.value)
//     }
//     return(
//         <fieldset>
//             <legend>输入组件</legend>
//             <input type="text" value={val} onChange={handleChange}/>
//             <button>提交</button>
//         </fieldset>
//     )
// }

// const Todoinput = forwardRef<any,Iprops>((props,ref) => {
const Todoinput = forwardRef<string,Iprops>((props,ref) => {

    // 解构
    let {onAddTodo} = props

    // 声明自己的value
    let [value,setValue] = useState<string>('')

    // 将输入值通过ref暴露给父组件
    useImperativeHandle(ref,()=>{
        return(
            value
        )
    })

    // onChange处理函数
    let handleChange = (e:any) => {
        setValue(e.target.value)
    }
    return(
        <fieldset>
            <legend>输入组件</legend>
            <input type="text" value={value} onChange={handleChange}/>
            <button onClick={()=>{
                onAddTodo();
                setValue('')
            }}>提交</button>
        </fieldset>
    )
})
export default Todoinput